<template>
  <div class="wrapper">
    <AppHeader></AppHeader>
    <AppSidebar></AppSidebar>
    <div class="content-box" :class="{'content-collapse':collapse}">
      <div class="content_wrapper">
        <!--<AppAside></AppAside>-->

        <AppTags></AppTags>
        <div class="content" style="flex:1;">

          <el-breadcrumb separator="/" style="padding:10px;border:1px solid #ddd;background:#fff;margin-bottom:1px;">
            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
              {{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>

          <div class="content_inner">
            <transition name="move" mode="out-in">
              <keep-alive :include="tagsList">
                <router-view></router-view>
              </keep-alive>
            </transition>
          </div>

        </div>
        <AppFooter></AppFooter>
      </div>
    </div>
  </div>

</template>

<script>
  import bus from './common/bus';
  import AppTags from './common/Tags.vue';
  import AppHeader from './common/Header'
  import AppSidebar from './common/Sidebar'
  import AppFooter from './common/Footer'
  // 以下两个组件，一个是右侧的待办事项，一个是弹出提示消息（暂未找到适用方法，可以先忽略）
  import AppAside from './common/Aside'
  import Breadcrumb from './common/Breadcrumb'

  export default {
    name: 'full',
    components: {
      AppTags,
      AppHeader,
      AppSidebar,
      AppAside,
      AppFooter,
      Breadcrumb
    },
    data() {
      return {
        tagsList: [],
        collapse: false
      }
    },
    created() {
      bus.$on('collapse', msg => {
        this.collapse = msg;
      });

      // 只有在标签页列表里的页面才使用 keep-alive，即关闭标签之后就不保存到内存中了。
      bus.$on('tags', msg => {
        let arr = [];
        for (let i = 0, len = msg.length; i < len; i++) {
          msg[i].name && arr.push(msg[i].name);
        }
        this.tagsList = arr;
      })
    },
    computed: {
      name() {
        return this.$route.name
      }
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .content_wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
</style>
